<!doctype html>

<head>



    <!-- player skin -->
    <link rel="stylesheet" href="../skin/minimalist.css">

    <!-- site specific styling -->
    <style>
        /*body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }*/
        /*.flowplayer { width: 80%; }*/

        #content {
            width: 60%;
        }
    </style>

    <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    <!-- include flowplayer -->
    <script src="../flowplayer.min.js"></script>

    <script>
        flowplayer.conf.adaptiveRatio = true;
    </script>
</head>

<body>


    <div id="content">
        <div class="flowplayer">
            <video>
                <source type="video/webm" src="http://stream.flowplayer.org/city5/480x480.webm">
                <source type="video/mp4" src="http://stream.flowplayer.org/city5/480x480.mp4">
            </video>
        </div>
    </div>

<!-- the player -->
<!--<div class="flowplayer" data-ratio="0.4167">-->
    <!--<video>-->
        <!--<source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm">-->
        <!--<source type="video/mp4" src="http://stream.flowplayer.org/bauhaus/624x260.mp4">-->
        <!--<source type="video/ogv" src="http://stream.flowplayer.org/bauhaus/624x260.ogv">-->
    <!--</video>-->
<!--</div>-->

</body>